<template>
  <div>
    <h1>生命周期</h1>
    <div id="happy">{{ uname }}</div>
  </div>
</template>

<script>
// 1. beforeCreate：data数据初始化之前，组件还没有数据，如果要获取就会是undefined
// 2. created: data数据初始化之后，可以获取到组件的数据
// 3. beforeMount：DOM渲染之前，DOM还没渲染， 获取不到页面元素  如果要获取就会是null
// 4. mounted：DOM渲染之后，可以操作DOM了
// 5. beforeUpdate: 数据更新，DOM更新前   这时候获取的话还是之前的旧数 据
// 6. updated: 数据更新，DOM更新后
// 7. beforeDestroy: 组件销毁前
// 8. destroyed: 组件销毁后
export default {
  // -----------------------------------------------------------------------------------
  // 数据初始化↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
  // 在这个beforeCreate生命周期中  获取不到我们定义的数据
  beforeCreate() {
    // console.log('大家好 我被创建了', this.uname, this.say())//这里直接报错了
    console.log('大家好 我是创建之前', this.uname, this.say) //这2个都是undefined
  },
  //创建的时候
  created() {
    // 我们一般在created生命周期中去请求服务器数据   可以获取到我们定义的数据
    console.log(
      '初始化数据,并且让当前实例代理了你的数据 ',
      this.uname, //成功打印了张三
      this.say //打印了这个方法的具体代码
    )
    this.say()
    // 在创建的时候 设置一个定时器
    this.Timer = setInterval(() => {
      return console.log('我是定时器,每一秒执行一次')
    }, 1000)
  },
  // -----------------------------------------------------------------------------------
  // 数据渲染↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
  //真实dom挂载之前↓
  beforeMount() {
    //beforeMount获取不到真实的dom页面  因为现在还是虚拟的
    console.log(document.querySelector('#happy')) //打印null
  },
  // 真实dom挂载之后↓
  mounted() {
    //mounted可以获取到页面dom
    console.log(document.querySelector('#happy')) //打印 <div id="happy">happy</div>
  },
  // -----------------------------------------------------------------------------------
  //数据更新↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
  //数据和页面更新前↓
  beforeUpdate() {
    console.log('数据和dom更新之前', document.querySelector('#happy'))//打印数据和dom更新之前<div id="happy">张三</div>
    console.log('数据和dom更新之前', document.querySelector('#happy').innerHTML)//打印数据和dom更新之前  张三
  },
  //数据和页面更新后↓
  updated() {
    console.log('数据和都更新之后', document.querySelector('#happy').innerHTML)//数据和都更新之后 张三123
  },
  // -----------------------------------------------------------------------------------
  // 数据销毁↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
  //销毁之前
  beforeDestroy() {
    // 一般用来解绑一些全局事件  比如说上面的定时器
    // 清除定时器
    clearInterval(this.timer)
    console.log('马上就要被销毁了')
  },
  // 销毁之后
  destroyed() {
    console.log('已经被销毁了')
  },
  // ------------------------------------------------------------------------------------
  data() {
    return {
      uname: '张三',
    }
  },
  methods: {
    say() {
      console.log('我感觉很糟糕 前面学的都忘了')
    },
  },
}
</script>

<style></style>
